<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-12-30 15:21:08
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-01-18 17:25:06
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="bread" @click="zxChi" :class="active == 1 ? 'active' : ''">
        <p>应用中心</p>
      </div>
      <div
        class="bread"
        style="margin-left: 40px"
        @click="tcChi"
        :class="active == 2 ? 'active' : ''"
      >
        <p>套餐中心</p>
      </div>
    </div>
    <div v-if="chioose" class="app">
      <application></application>
    </div>
    <div class="package" v-else>
      <package></package>
    </div>
  </div>
</template>

<script>
import Application from "./conponents/application/index.vue";
import Package from "./conponents/package/index.vue";
export default {
  components: {
    Application,
    Package,
  },
  data() {
    return {
      active: 1,
      chioose: true,
    };
  },
  methods: {
    zxChi() {
      this.chioose = true;
      this.active = 1;
    },
    tcChi() {
      this.chioose = false;
      this.active = 2;
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 74px;
  display: flex;
  border-bottom: 1px solid #ececec;
  .bread {
    display: flex;
    align-items: center;
    margin-left: 5px;
    height: 30px;
    display: flex;
    vertical-align: middle;
    height: 74px;
    img {
      height: 100%;
    }
    i {
      font-size: 30px;
    }
    p {
       font-size: 16Px;
    }
  }
}
.active {
  font-weight: 700;
  color: #1267fa !important;
  height: 74px;
  border-bottom: 2px solid #1267fa;
}
.app {
  margin-top: 20px;
}
.package {
  margin-top: 20px;
}
</style>